<template>
  <view class="w-full min-h-screen bg-[#f5f5f5] max-w-[750rpx] mx-auto pb-[120rpx] box-border">
    <!-- 顶部标题栏+返回 -->
    <view class="relative bg-[#165DFF] text-white text-center text-[36rpx] font-bold py-[32rpx] rounded-b-2xl">
      <view class="absolute left-[32rpx] top-[32rpx] text-[32rpx] z-10" @click="goBack">←</view>
      课程详情
    </view>
    <!-- 课程封面 -->
    <view class="w-full h-[240rpx] overflow-hidden rounded-2xl mt-[-32rpx] mb-[24rpx] mx-auto bg-[#e6eaf2] flex items-center justify-center">
      <image :src="course.cover" mode="aspectFill" class="w-full h-full object-cover block" :style="{ minHeight: '100%' }" />
    </view>
    <!-- 课程信息卡片 -->
    <view class="bg-white rounded-2xl shadow-md p-[32rpx] mx-[24rpx] mb-[24rpx] relative z-10">
      <view class="text-[36rpx] font-bold mb-[16rpx] text-[#222]">{{ course.title }}</view>
      <view class="flex gap-x-8 mb-[16rpx]">
        <view class="text-[#666] text-[26rpx]">{{ course.students }}人学习</view>
        <view class="text-[#666] text-[26rpx]">{{ course.lessons }}课时</view>
        <!-- <view class="text-[#666] text-[26rpx]">{{ course.rating }}分</view> -->
      </view>
      <view class="text-[#FF4D4F] text-[36rpx] font-bold mb-[16rpx]">¥{{ course.price }}</view>
      <view class="flex items-center mb-[8rpx]">
        <image :src="course.teacher.avatar" class="w-[40rpx] h-[40rpx] rounded-full mr-[12rpx] object-cover bg-[#e6eaf2]" @error="onAvatarError" />
        <view class="text-[28rpx] text-[#333]">{{ course.teacher.name }}</view>
      </view>
    </view>
    <!-- 简介区块 -->
    <view class="text-[30rpx] font-bold px-[32rpx] py-[20rpx] bg-[#f9f9f9] mt-[8rpx]">课程简介</view>
    <view class="bg-white px-[32rpx] py-[24rpx] text-[28rpx] leading-[1.7] text-[#333]">{{ course.description }}</view>
    <!-- 目录区块 -->
    <view class="text-[30rpx] font-bold px-[32rpx] py-[20rpx] bg-[#f9f9f9] mt-[8rpx]">课程目录</view>
    <view class="bg-white mb-[120rpx]">
      <view v-for="(chapter, idx) in chapters" :key="chapter.id" class="px-[32rpx] py-[24rpx] border-b border-[#eee] flex items-center">
        <view class="flex-1 text-[28rpx]">{{ chapter.title }}<span v-if="chapter.locked" class="ml-[8rpx] text-[#FFB300] align-middle">🔒</span></view>
        <view class="text-[24rpx] mt-[2rpx]">{{ chapter.lessons }}课时 · {{ chapter.duration }}</view>
      </view>
    </view>
    <!-- 底部吸顶购买栏 -->
    <view class="fixed bottom-0 left-0 right-0 w-full max-w-[750rpx] mx-auto box-border bg-white px-[32rpx] py-[20rpx] shadow-[0_-2rpx_8rpx_rgba(0,0,0,0.06)] flex items-center justify-between z-[999] border-t border-[#eee]">
      <view class="flex-1">
        <span class="text-[26rpx] text-[#999] line-through mr-[12rpx]">¥{{ course.originalPrice }}</span>
        <span class="text-[#FF4D4F] text-[36rpx] font-bold">¥{{ course.price }}</span>
      </view>
      <nut-button type="primary" class="rounded-2xl text-[30rpx] px-[48rpx] bg-[#165DFF] font-bold" @click="purchaseCourse">立即购买</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue'

/**
 * 课程详情页面
 * @description 课程信息、简介、目录、底部购买栏，严格按设计稿和Cursor规则实现。
 * @performance 只渲染必要内容，mock数据，移动端适配。
 */

const goBack = () => {
  Taro.navigateBack()
}

const course = ref({
  cover: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg', // 可访问的课程封面图片
  title: 'HTML5与CSS3基础教程',
  students: 128,
  lessons: 20,
  rating: 4.9,
  price: 99,
  originalPrice: 199,
  teacher: {
    name: '张老师',
    avatar: 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg' // 可访问的讲师头像
  },
  description:
    '本课程从零开始讲解HTML5和CSS3的基础知识，包括HTML5新标签、语义化结构、CSS3选择器、盒模型、Flex布局、响应式设计等核心内容。通过大量实例演示，帮助学员快速掌握现代网页开发基础技术。'
})

const chapters = ref([
  { id: 1, title: '第1章：HTML5基础', lessons: 4, duration: '120分钟', locked: false },
  { id: 2, title: '第2章：CSS3基础', lessons: 5, duration: '150分钟', locked: false },
  { id: 3, title: '第3章：Flex布局', lessons: 3, duration: '90分钟', locked: true },
  { id: 4, title: '第4章：响应式设计', lessons: 4, duration: '120分钟', locked: true }
])

function purchaseCourse() {
  Taro.showToast({ title: '即将跳转到支付页面', icon: 'success' })
}

function onAvatarError(e: any) {
  course.value.teacher.avatar = 'https://img1.imgtp.com/2023/07/21/0QwQwQwQwQ.jpg'
}
</script>

<style scoped lang="scss">

</style>